<template>
  <div class="dashboard-editor-container">
    <el-row style="background-color: #fff;margin-bottom: 12px;">
      <person-child-form @dwBoolean="receiveDwBoolean"
                         @roadBoolean="receiveRoadBoolean"
                         @tableLoad="tableLoad"
                         @tableData="tableData"
                         :dw_name="dw_name"
                         :road_name="road_name"
                         :pageNum="pageNum"
                         :pageSize="pageSize"
                         :ranNum="ranNum">
      </person-child-form>
    </el-row>
    <el-row style="background-color: #fff">
      <person-child-table @addBoolean="receiveAddBoolean"
                          @editBoolean="receiveEditBoolean"
                          @roadPop="receiveDwBoolean3"
                          @pageNums="pageNums"
                          @delSearch="tiggerSearch"
                          @editRoad="tiggerSearch"
                          @sizePage="changePageSize"
                          :dw_name3.sync="dw_name3"
                          :loading="loading"
                          :tableDatas="tableDatas">
      </person-child-table>
    </el-row>
    <person-child-dialog-dw :dialogDwVisible.sync="dialogDwVisible"
                            @dwName="selectDwname"
                            @dwName2="selectDwname2"
                            @dwName3="selectDwname3"
                            @dwName4="selectDwname4"
                            :dwType="dwType"
                            :dwLoading.sync="dwLoading">
    </person-child-dialog-dw>
    <person-child-dialog-road :dialogRoadVisible.sync="dialogRoadVisible"
                              :roadLoading.sync="roadLoading"
                              @roadName="selectRoadName">
    </person-child-dialog-road>
    <person-child-add :dialogAddVisible.sync="dialogAddVisible"
                      @addDwName="receiveDwBoolean2"
                      :dwName2.sync="dw_name2">
    </person-child-add>
    <person-child-edit :dialogEditVisible.sync="dialogEditVisible"
                       :editForm="editForm"
                       @editDwName="receiveDwBoolean4"
                       @editSearch="tiggerSearch"
                       :dwName4.sync="dw_name4">
    </person-child-edit>
  </div>
</template>

<script>
  import PersonChildForm from './personChild/personChildForm'
  import PersonChildTable from './personChild/personChildTable'
  import PersonChildDialogDw from './personChild/personChildDialogDw'
  import PersonChildDialogRoad from './personChild/personChildDialogRoad'
  import PersonChildAdd from './personChild/personChildAdd'
  import PersonChildEdit from './personChild/personChildEdit'

  export default {
    data() {
      return {
        dialogDwVisible: false, // 单位弹出框属性
        dwType: 0,
        ranNum: 0,
        dialogRoadVisible: false, // 收费路段弹出框属性
        dialogAddVisible: false, //  添加人员弹出框属性
        dialogEditVisible: false, // 修改人员弹出框属性
        loading: false, // 表格加载效果
        dwLoading: false, // 单位弹出框加载效果
        roadLoading: false, // 收费路段弹出框加载效果
        pageNum: 1, // 当前页码
        pageSize: 10,
        tableDatas: [], // 表单数据
        editForm: {}, // 选中修改人员信息
        dw_name: '', // 单位名称
        dw_name2: '', // 添加人员单位名称
        dw_name3: '', // 选择路段单位名称
        dw_name4: '', // 编辑人员单位名称
        road_name: '' // 收费路名称
      }
    },
    methods: {
      /* 接收子组件传递过来的弹出框的布尔值 */
      receiveDwBoolean: function(val) {
        this.dwType = 0
        this.dialogDwVisible = val
        this.dwLoading = val
      },
      receiveDwBoolean2: function(val) {
        this.dwType = 1
        this.dialogDwVisible = val
      },
      receiveDwBoolean3: function(val) {
        this.dwType = 2
        this.dialogDwVisible = val
      },
      receiveDwBoolean4: function(val) {
        this.dwType = 3
        this.dialogDwVisible = val
      },
      receiveRoadBoolean: function(val) {
        this.dialogRoadVisible = val
        this.roadLoading = val
      },
      receiveAddBoolean: function(val) {
        this.dialogAddVisible = val
      },
      receiveEditBoolean: function(val) {
        this.editForm = val[1]
        this.dialogEditVisible = val[0]
      },
      /* 接收子组件传递过来的弹出框的单位名称 */
      selectDwname: function(val) {
        this.dw_name = val
      },
      selectDwname2: function(val) {
        this.dw_name2 = val
      },
      selectDwname3: function(val) {
        this.dw_name3 = val
      },
      selectDwname4: function(val) {
        this.dw_name4 = val
      },
      /* 接收子组件传递过来的弹出框的路段名称 */
      selectRoadName: function(val) {
        this.road_name = val
      },
      /* 表格loading效果 */
      tableLoad: function(val) {
        this.loading = val
      },
      /* 表单数据 */
      tableData: function(val) {
        this.tableDatas = val
      },
      /* 传递当前页码 */
      pageNums: function(val) {
        this.pageNum = val
      },
      changePageSize: function(val) {
        this.pageSize = val
      },
      /* 执行完操作后触发查询 */
      tiggerSearch: function(val) {
        this.ranNum = val
      }
    },
    components: {
      PersonChildEdit,
      PersonChildAdd,
      PersonChildDialogRoad,
      PersonChildTable,
      PersonChildForm,
      PersonChildDialogDw
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 42px;
    padding-top: 20px;
    background-color: rgb(240, 242, 245);
  }
</style>
